<template>
  <!-- html 结构 -->
  <div class="person">
    <!-- <h2 id="title">App.vue中的标签内容</h2> -->
  </div>

  <!-- v-bind:renmen = "personsList" 把父组件中的personsList数据绑定到renmen，然后把他传到子组件中 -->
  <!-- <Person :renmen="personsList" /> -->
  <Person />
  <h2 a="1+1" :b="1 + 1" c="zhang-san" :d="d">测试</h2>
</template>

<!-- vue3的写法 -->
<script lang="ts" name="App" setup>
import { reactive } from "vue";
import Person from "./components/Person.vue";
import { type IPerson, type Persons } from "@/types";

// let persons:Array<IPerson> = reactive([
let personsList = reactive<Persons>([
  {
    id: "jxljj01",
    name: "张三",
    age: 19,
    grilFriend: "大熊猫",
  },
  {
    id: "jxljj01",
    name: "李四",
    age: 29,
  },
  {
    id: "jxljj01",
    name: "王五",
    age: 39,
  },
]);

let d = 999;
</script>
